<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
		<view class="kong"></view>
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">{{help_detail.title}}</view>
				<view class="return"></view>
			</view>
		</view>
		
		<view class="help_con">
			<view class="help_img"  v-if="help_detail.images != ''">
				<swiper class="swiper" :indicator-dots="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in help_detail.images" :key="index">
						<image :src="Config_ysy.image_url + item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="help_video" v-if="help_detail.video != ''">
				<video :src="Config_ysy.image_url + help_detail.video" object-fit="cover" controls></video>
			</view>
			<view class="banner">
				<rich-text :nodes="help_detail.content"></rich-text>
			</view>
		</view>
		<view class="dianzan">
			<view class="see_num">
				<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/liu.svg" mode="aspectFit"></image>
				<text>{{help_detail.views}}</text>
			</view>
			<view class="help_num">
				<!-- <image src="/static/nozan.svg" v-if="like == 1" mode="aspectFit" @click="dianzan(1)"></image>
				<image src="/static/zan.svg" v-if="like == 2" mode="aspectFit" @click="dianzan(2)"></image> -->
				<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/zan.svg" mode="aspectFit"></image>
				<text>{{help_detail.help_num}}</text>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				help_detail:{},
				help_id:'',
				like:1,
				token:'',
			}
		},
		onLoad(options) {
			this.help_id = options.id;
			this.token=options.token
			this.get_helpDetail();
		},
		methods: {
			// 返回上一页
			returnPage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 帮助详情请求
			get_helpDetail(){
				var url ='/api/home/Instructions/details'
				let params={
					id:this.help_id,
					token:this.token
				};
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					// console.log(res);
					if (res.statusCode == 200 && res.data.code == 1) {
						this.help_detail = res.data.data
						// console.log(this.help_detail)
					} 
				});
			},
			// 点赞
			dianzan(e){
				if(e == 1){
					this.like = 2;
				}else if(e == 2){
					this.like = 1;
				}
			}
		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 200upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.help_con{
		width: 100%;
		padding-top: 200upx;
		.help_img{
			width: 100%;
			height: 500upx;
			margin-bottom: 30upx;
			.swiper{
				width: 100%;
				height: 500upx;
				background: #f2f2f2;
				image{
					width: 750upx;
					height: 500upx;
				}
			}
		}
		.help_video{
			width: 100%;
			height: 450upx;
			margin-bottom: 30upx;
			video{
				width: 100%;
				height: 450upx;
			}
		}
		.banner{
			width: 90%;
			margin: 0 auto;
			padding-top: 20upx;
		}
	}
	.dianzan{
		width: 90%;
		margin: 0 auto;
		height: 100upx;
		margin-top: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.see_num{
			padding: 5upx 20upx;
			border: 2upx solid #9481da;
			border-radius: 50upx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 40upx;
				height: 40upx;
			}
			text{
				padding-left: 20upx;
				color: #9481da;
			}
		}
		.help_num{
			padding: 5upx 20upx;
			border: 2upx solid #d4237a;
			border-radius: 50upx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 35upx;
				height: 35upx;
			}
			text{
				padding-left: 20upx;
				color: #d4237a;
			}
		}
	}
}
	
</style>
